<template>
	<view>
		<u-popup :show="lagShow" mode='center' :closeOnClickOverlay='true' @close="close">
			<view class="popu-qy">
				<image src="../static/nav/soup/closeIcon.png" class="closeIcon" mode="" @click="close"></image>
				<text class="popu_title">选择语言</text>
				<!-- 选项 -->

				<view class="but-conten">
					<button class="btn-primary but-c" @click="tasteSelectFun('zh-Hans')">
						<image class="nfImage" src="../static/nationalFlag/zhong.png" mode=""></image>
						中文
					</button>
				</view>
				<view class="but-conten">
					<button class="btn-primary but-c" @click="tasteSelectFun('French')">
						<image class="nfImage" src="../static/nationalFlag/fa.png" mode=""></image>
						Français
					</button>
				</view>
				<view class="but-conten">
					<button class="btn-primary but-c" @click="tasteSelectFun('en')">
						<image class="nfImage" src="../static/nationalFlag/mei.png" mode=""></image>
						English
					</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "switchLanguagePopu",
		data() {
			return {
				lagShow: false
			};
		},
		computed: {
			lag() {
				let lagIn = ''
				switch (uni.getLocale()) {
					case 'en':
						lagIn = 'en'
						break;
					case 'zh-Hans':
						lagIn = 'ch'
						break;
					case 'French':
						lagIn = 'fr'
						break;
				}
				return lagIn
			}
		},
		mounted() {
			// 数量减少
			this.bus.$on("lagShow", (v) => {
				this.lagShow = v
			});
		},
		methods: {
			close() {
				this.lagShow = false
			},
			tasteSelectFun(e) {
				uni.setLocale(e);
				this.$i18n.locale = e
				uni.setStorageSync('language',this.lag)
				this.lagShow = false
				this.bus.$emit('fetchFun')
			}
		}
	}
</script>

<style scoped lang="scss">
	page
	.popu-qy {
		width: 386px;
		padding: 20px 16px;
		background-color: $qy-bg-popu-conten-color;

		border-radius: 10px;
		color: $uni-text-color;
		font-size: 14px;
		position: relative;
	}

	.popu_title {
		color: $qy-text-color-title;
		font-size: 18px;

	}

	.closeIcon {
		width: 24px;
		height: 24px;
		position: absolute;
		right: 16px;
		top: 20px;
	}


	.top_popu_clas {
		margin-top: 24px;
	}

	.but-c {
		width: 152px;
		height: 50px;
		margin: 0 auto;
		background: $qy-bg-nav-option-color;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.but-conten {
		display: flex;
		margin: 0 auto;
		margin-top: 30px;
	}

	.nfImage {
		width: 35px;
		height: 30px;
		margin-right: 10px;
	}
</style>